<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>洪炜斐——学生管理系统——注册</title>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="./css/hf.css">
    <link rel="stylesheet" href="./css/table.css">
    <link rel="stylesheet" href="./css/custom.css">

    <style>
        .container-form {
            height: 80%;
        }

        .img-code {
        	cursor: pointer;
            width: 3em;
            height: 1.5em;
        }
    </style>
</head>
<body>
    <jsp:include page="component/header.jsp">
    	<jsp:param name="page" value="注册"/>
    </jsp:include>
    <main>
        <div class="container-form flex-column items-center justify-center">
            <form class="form panel" method="post" action="./action/user">
                <div class="text-center">
                    <h3 style="margin: 0;">注册账号</h3>
                </div>
                <div>
                    <label for="input-username">
                        用户名：
                    </label>
                    <input
                        id="input-username"
                        type="text"
                        name="username"
                        placeholder="请输入用户名"
                        required
                        pattern="[a-zA-Z0-9_]{6,12}"
                    >
                    <span></span>
                    <span></span>
                </div>
                <div>
                    <label for="input-password">
                        密码：
                    </label>
                    <input
                        id="input-password"
                        type="password"
                        name="password"
                        placeholder="请输入密码"
                        required
                        pattern="[a-zA-Z0-9_]{6,12}"
                    >
                    <span></span>
                    <span></span>
                </div>
                <div>
                    <label for="input-password2">
                        确认密码：
                    </label>
                    <input
                        id="input-password2"
                        type="password"
                        placeholder="请再次输入密码"
                        required
                    >
                    <span></span>
                    <span></span>
                </div>
                <div>
                    <label for="input-email">
                        邮箱：
                    </label>
                    <input id="input-email" type="email" name="email" placeholder="请输入邮箱（可空）">
                </div>
                <div class="flex-row">
                    <label for="input-code">验证码：</label>
                    <div class="flex-row gap-05em">
                        <input id="input-code" type="text" name="code" placeholder="请输入验证码" required>
                        <img id="img-code" class="img-code" src="" alt="验证码">
                    </div>
                </div>
                <div class="flex-row justify-center">
                    <input class="button primary" type="submit" value="注册">
                </div>
            </form>
        </div>
    </main>

    <script>
    	function refreshCode() {
    		document.querySelector("#img-code").src = "./action/user/code?time=" + new Date().getTime();
    	}
    	window.addEventListener("pageshow", () => {
    		refreshCode();
    	});
    	document.querySelector("#img-code").onclick = () => {
    		refreshCode();
    	};
    
        const inputPassword = document.getElementById("input-password");
        const inputPassword2 = document.getElementById("input-password2");
        inputPassword.addEventListener("input", () => {
            inputPassword2.setAttribute("pattern", inputPassword.value);
        });
        inputPassword2.addEventListener("input", () => {
            if (inputPassword.value === inputPassword2.value) {
                inputPassword2.setCustomValidity("");
            } else {
                inputPassword2.setCustomValidity("两次密码不一致");
            }
        });
    </script>
</body>
</html>


